<template>
  <a-layout style="height: 100vh;">
    <!-- 头部区域 -->
    <a-layout-header class="header">
      <a-row>
        <a-button>单选题</a-button>
        <a-button>多选题</a-button>
      </a-row>
    </a-layout-header>

    <!-- 主体区域：使用 a-layout 布局，内容高度自动适配 -->
    <!--overflow:auto样式可以保证在元素内容过长时，显示滚动条-->
    <a-layout style="flex: 1;">
      <!-- 左侧区域 -->
      <a-layout-sider class="sider" width="50%" style="overflow: auto;">
        <div>左侧内容</div>
        <!-- 假设左侧内容很长 -->
        <!--<div style="height: 800px;">长内容...</div>-->
        <div>
          <a-row justify="start">
            <!--样式使用了动态绑定，对比selectedQuestionId和当下question，如果相等，则加载selected类，否则为透明-->
            <a-col
                :span="24"
                v-for="question in questions"
                :key="question['questionId']"
                :class="{'selected': selectedQuestionId === question['questionId']}"
                @click="handleQuestionClick(question['questionId'])"
            >
              <!-- 根据题目类型渲染对应的预览组件 -->
              <component :is="getPreviewComponentType(question.type)" :questionId="question.questionId" />
            </a-col>
          </a-row>
        </div>
      </a-layout-sider>

      <!-- 右侧内容 -->
      <a-layout style="overflow: auto;">
        <a-layout-content class="content" style="padding: 24px;">
          <h3>右侧内容</h3>
          <!-- 假设右侧内容很长 -->
          <!--<div style="height: 800px;">长内容...</div>-->
          <!-- 动态渲染编辑页面 -->
          <!--使用key属性为每个组件命名，强制其在selectedQuestionId变化时刷新——不是很优雅的写法-->
          <component
              v-if="selectedQuestion"
              :is="getEditPanelComponent(selectedQuestion.type)"
              :questionId="selectedQuestionId"
              :key="selectedQuestionId"
          />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script setup>
  import {useQuestionStore} from "@/utils/paper.js";
  import {computed, reactive, ref} from "vue";
  import { MultiChoice, SingleChoice, SingleLineText,MultiLineText,DropdownSelect ,CascadingDropdown,DescriptionQuestion} from "@/components/CVC/Component_Questions_Preview"
  import {SingleChoiceEdit,MultiChoiceEdit,CascadingDropdownEdit,DescriptionQuestionEdit,DropdownSelectEdit,SingleLineTextEdit,MultiLineTextEdit} from "@/components/CVC/Component_Questions_Edit";// 引入编辑页面的题目编辑
  import {useQuestions} from "@/utils/paper.js";
  const { getQuestionById ,questions11} = useQuestions()
  // 问卷的全局数据存储
  const QuestionStore=useQuestionStore();

  // 当前页面的questions存储
  // 由于数据更新直接放在子组件（这个也是采用Pinia的一个目的），那么这里就需要计算属性，监听全局数据的变化
  // 这里没有改就是为了说明为什么需要封装一下对Pinia的调用
  const questions=computed(()=>QuestionStore.$state['questions']);
  // 根据题目类型动态获取对应的预览组件
  const getPreviewComponentType = (type) => {
    switch (type) {
      case "CheckBox":
        return MultiChoice; // 多选组件
      case "RadioButton":
        return SingleChoice; // 单选组件
      case "SingleLineText":
        return SingleLineText;
      case "MultiLineText":
        return MultiLineText;
      case "DropdownSelect":
        return DropdownSelect;
      case "CascadingDropdown":
        return CascadingDropdown;
      case "DescriptionQuestion":
        return DescriptionQuestion;
      default:
        return null;
    }
  };
  // 根据题目类型获取对应的题目编辑组件
  const getEditPanelComponent=(type)=>{
    switch (type){
      case 'RadioButton':
        return SingleChoiceEdit;
      case 'CheckBox':
        return MultiChoiceEdit;
      case "SingleLineText":
        return SingleLineTextEdit;
      case "MultiLineText":
        return MultiLineTextEdit;
      case "DropdownSelect":
        return DropdownSelectEdit;
      case "CascadingDropdown":
        return CascadingDropdownEdit;
      case "DescriptionQuestion":
        return DescriptionQuestionEdit;
      default:
        return null;
    }
  }
  const selectedQuestionId=ref('');
  const selectedQuestion=computed(()=>getQuestionById(selectedQuestionId.value))
  // 点击题目组件后触发的事件监听器
  const handleQuestionClick=(questionId)=>{
    // 更新选项
    selectedQuestionId.value=questionId;
  }


</script>

<style scoped>
.header {
  background-color: grey;
  color: white;
  text-align: center;
  line-height: 64px;
  height: auto; /* 头部高度可以根据内容自适应 */
}

.sider {
  background-color: white;
  text-align: center;
}

.content {
  text-align: center;
}
.selected {
  background-color: lightblue;  /* 选中时的背景颜色 */
}

a-col {
  background-color: transparent;  /* 默认背景颜色 */
}
</style>
